<script setup>
import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref} from "vue";

let sum = ref(0)

function add() {
  sum.value += 1
}

/**
 * 创建(vue文件=>对象实例)
 * 挂载(对象实例=>浏览器窗口上)
 * 更新(vue实例数据更新前=>vue实例数据更新后)
 * 销毁(vue实例在页面上=>vue实例移除页面)
 */
// 创建
/**
 * setup第一行到最后一行
 */
// 挂载
onBeforeMount(() => {
  console.log("挂载前")
})
onMounted(() => {
  console.log("挂载后")
  /**
   * 注意父组件的挂载结束是在子组件全部挂载之后执行的
   */
})
// 更新
onBeforeUpdate(() => {
  console.log("更新前")
})
onUpdated(() => {
  console.log("更新完毕")
})
// 销毁
onBeforeUnmount(() => {
  console.log("销毁前")
})
onUnmounted(() => {
  console.log("销毁完毕")
})
</script>

<template>

</template>

<style scoped>

</style>